<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宝宝生长记录</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="app-container">
        <!-- 顶部导航 -->
        <div class="flex items-center justify-between mb-6">
            <h1 class="text-xl font-bold text-gray-900">生长记录</h1>
            <button class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center shadow-md hover:bg-blue-700 transition-colors">
                <i class="fas fa-plus"></i>
            </button>
        </div>
        
        <!-- 基本信息卡片 -->
        <div class="card bg-gradient-to-r from-blue-50 to-indigo-50 border-none mb-6 fade-in">
            <div class="flex items-center">
                <div class="w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center overflow-hidden mr-4">
                    <img src="https://images.unsplash.com/photo-1588615419966-0c0f3a9add85?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="宝宝照片" class="w-full h-full object-cover">
                </div>
                <div>
                    <h2 class="text-lg font-bold text-gray-900">小明</h2>
                    <div class="flex items-center mt-1">
                        <span class="bg-blue-200 text-blue-800 text-xs px-2 py-0.5 rounded-full mr-2">男</span>
                        <span class="text-gray-600 text-sm">11个月20天</span>
                    </div>
                    <div class="text-xs text-gray-500 mt-1">出生于 2023年6月15日</div>
                </div>
            </div>
            
            <div class="mt-2">
                <div class="progress-bar mt-3">
                    <div class="progress-fill bg-blue-500" style="width: 98%"></div>
                </div>
                <div class="flex justify-between text-xs text-blue-800 mt-1">
                    <span>出生</span>
                    <span>即将满1岁 (10天后)</span>
                </div>
            </div>
        </div>
        
        <!-- 最新记录摘要 -->
        <div class="grid grid-cols-2 gap-4 mb-6 fade-in" style="animation-delay: 0.1s">
            <div class="data-card data-card-blue">
                <div class="data-label">最新身高</div>
                <div class="data-value text-blue-600">75.5 <span class="text-sm">cm</span></div>
                <div class="flex items-center justify-between">
                    <span class="text-xs text-gray-500">2024年5月25日</span>
                    <span class="text-xs font-medium px-2 py-0.5 bg-blue-100 text-blue-700 rounded-full">
                        50%
                    </span>
                </div>
            </div>
            
            <div class="data-card data-card-pink">
                <div class="data-label">最新体重</div>
                <div class="data-value text-pink-600">9.2 <span class="text-sm">kg</span></div>
                <div class="flex items-center justify-between">
                    <span class="text-xs text-gray-500">2024年5月25日</span>
                    <span class="text-xs font-medium px-2 py-0.5 bg-pink-100 text-pink-700 rounded-full">
                        45%
                    </span>
                </div>
            </div>
        </div>
        
        <!-- 生长曲线汇总 -->
        <div class="fade-in" style="animation-delay: 0.2s">
            <div class="flex justify-between items-center mb-4">
                <h2 class="section-header mb-0">生长曲线</h2>
                <div class="flex">
                    <select class="text-xs bg-gray-100 border border-gray-200 rounded-lg px-2 py-1 mr-2">
                        <option>最近6个月</option>
                        <option>最近12个月</option>
                        <option>全部</option>
                    </select>
                    <button class="icon-btn text-sm">
                        <i class="fas fa-ellipsis-v"></i>
                    </button>
                </div>
            </div>
            
            <div class="card p-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-semibold text-gray-900">发育趋势</h3>
                    <div class="text-xs text-gray-500">世卫组织标准</div>
                </div>
                
                <div class="chart-container">
                    <canvas id="growthChart"></canvas>
                </div>
                
                <div class="grid grid-cols-2 gap-4 mt-5">
                    <button class="flex items-center justify-center py-2 px-3 bg-blue-50 rounded-lg text-blue-700 text-sm font-medium hover:bg-blue-100 transition-colors">
                        <i class="fas fa-ruler-vertical mr-2"></i> 身高详情
                    </button>
                    <button class="flex items-center justify-center py-2 px-3 bg-pink-50 rounded-lg text-pink-700 text-sm font-medium hover:bg-pink-100 transition-colors">
                        <i class="fas fa-weight mr-2"></i> 体重详情
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 记录概要统计 -->
        <div class="mt-6 fade-in" style="animation-delay: 0.3s">
            <div class="grid grid-cols-3 gap-3">
                <div class="bg-gray-50 rounded-lg p-3 text-center">
                    <div class="text-lg font-bold text-gray-800">7</div>
                    <div class="text-xs text-gray-500">总记录数</div>
                </div>
                <div class="bg-blue-50 rounded-lg p-3 text-center">
                    <div class="text-lg font-bold text-blue-700">+25.5</div>
                    <div class="text-xs text-gray-500">身高增长(cm)</div>
                </div>
                <div class="bg-pink-50 rounded-lg p-3 text-center">
                    <div class="text-lg font-bold text-pink-700">+5.2</div>
                    <div class="text-xs text-gray-500">体重增长(kg)</div>
                </div>
            </div>
        </div>
        
        <!-- 最近记录 -->
        <div class="mt-6 fade-in" style="animation-delay: 0.4s">
            <div class="flex justify-between items-center mb-4">
                <h2 class="section-header mb-0">最近记录</h2>
                <a href="#" class="text-blue-600 text-sm font-medium">查看全部</a>
            </div>
            
            <div class="card">
                <div class="list-item hover:bg-gray-50 rounded-lg transition-colors">
                    <div class="flex items-start">
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mt-1 mr-3">
                            <i class="fas fa-ruler text-blue-600"></i>
                        </div>
                        <div>
                            <div class="list-label">2024年5月25日</div>
                            <div class="text-xs text-gray-500">11个月10天</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-sm font-semibold">
                            <span class="text-blue-600">75.5 cm</span> / 
                            <span class="text-pink-600">9.2 kg</span>
                        </div>
                        <div class="flex items-center justify-end mt-1">
                            <span class="flex items-center text-green-600 text-xs">
                                <i class="fas fa-arrow-up text-xs mr-1"></i> 1.5cm
                            </span>
                            <span class="mx-1 text-gray-300">|</span>
                            <span class="flex items-center text-green-600 text-xs">
                                <i class="fas fa-arrow-up text-xs mr-1"></i> 0.3kg
                            </span>
                        </div>
                    </div>
                </div>
                
                <div class="list-item hover:bg-gray-50 rounded-lg transition-colors">
                    <div class="flex items-start">
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mt-1 mr-3">
                            <i class="fas fa-ruler text-blue-600"></i>
                        </div>
                        <div>
                            <div class="list-label">2024年4月18日</div>
                            <div class="text-xs text-gray-500">10个月3天</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-sm font-semibold">
                            <span class="text-blue-600">74.0 cm</span> / 
                            <span class="text-pink-600">8.9 kg</span>
                        </div>
                        <div class="flex items-center justify-end mt-1">
                            <span class="flex items-center text-green-600 text-xs">
                                <i class="fas fa-arrow-up text-xs mr-1"></i> 1.5cm
                            </span>
                            <span class="mx-1 text-gray-300">|</span>
                            <span class="flex items-center text-green-600 text-xs">
                                <i class="fas fa-arrow-up text-xs mr-1"></i> 0.4kg
                            </span>
                        </div>
                    </div>
                </div>
                
                <div class="list-item hover:bg-gray-50 rounded-lg transition-colors">
                    <div class="flex items-start">
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mt-1 mr-3">
                            <i class="fas fa-ruler text-blue-600"></i>
                        </div>
                        <div>
                            <div class="list-label">2024年3月15日</div>
                            <div class="text-xs text-gray-500">9个月</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-sm font-semibold">
                            <span class="text-blue-600">72.5 cm</span> / 
                            <span class="text-pink-600">8.5 kg</span>
                        </div>
                        <div class="flex items-center justify-end mt-1">
                            <span class="flex items-center text-green-600 text-xs">
                                <i class="fas fa-arrow-up text-xs mr-1"></i> 2.5cm
                            </span>
                            <span class="mx-1 text-gray-300">|</span>
                            <span class="flex items-center text-green-600 text-xs">
                                <i class="fas fa-arrow-up text-xs mr-1"></i> 0.5kg
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="flex justify-center mt-4">
                <button class="text-sm text-blue-600 font-medium flex items-center">
                    加载更多 <i class="fas fa-chevron-down ml-1"></i>
                </button>
            </div>
        </div>
    </div>
    
    <!-- 底部导航栏 -->
    <div class="tab-bar">
        <div class="tab-item">
            <i class="tab-icon fas fa-home"></i>
            <span>首页</span>
        </div>
        <div class="tab-item">
            <i class="tab-icon fas fa-calendar-alt"></i>
            <span>日期</span>
        </div>
        <div class="tab-item active">
            <i class="tab-icon fas fa-chart-line"></i>
            <span>生长</span>
        </div>
        <div class="tab-item">
            <i class="tab-icon fas fa-cog"></i>
            <span>设置</span>
        </div>
    </div>
    
    <script>
        // 初始化生长曲线图表
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('growthChart').getContext('2d');
            
            // 构建简化版生长曲线数据
            const growthChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['6月', '7月', '8月', '9月', '10月', '11月'],
                    datasets: [
                        {
                            label: '身高 (cm)',
                            data: [65, 67.5, 70, 72.5, 74, 75.5],
                            borderColor: 'rgba(59, 130, 246, 0.8)',
                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
                            borderWidth: 3,
                            fill: true,
                            tension: 0.4,
                            pointBackgroundColor: 'white',
                            pointBorderColor: 'rgba(59, 130, 246, 1)',
                            pointBorderWidth: 2,
                            pointRadius: 4,
                            pointHoverRadius: 6
                        },
                        {
                            label: '体重 (kg)',
                            data: [7.1, 7.6, 8.0, 8.5, 8.9, 9.2],
                            borderColor: 'rgba(236, 72, 153, 0.8)',
                            backgroundColor: 'rgba(236, 72, 153, 0.1)',
                            borderWidth: 3,
                            fill: true,
                            tension: 0.4,
                            yAxisID: 'y1',
                            pointBackgroundColor: 'white',
                            pointBorderColor: 'rgba(236, 72, 153, 1)',
                            pointBorderWidth: 2,
                            pointRadius: 4,
                            pointHoverRadius: 6
                        }
                    ]
                },
                options: {
                    responsive: true,
                    interaction: {
                        mode: 'index',
                        intersect: false
                    },
                    plugins: {
                        legend: {
                            position: 'top',
                            labels: {
                                usePointStyle: true,
                                boxWidth: 8,
                                boxHeight: 8,
                                padding: 10,
                                font: {
                                    size: 11
                                }
                            }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(255, 255, 255, 0.9)',
                            titleColor: '#111827',
                            bodyColor: '#4b5563',
                            borderColor: 'rgba(0, 0, 0, 0.05)',
                            borderWidth: 1,
                            displayColors: false,
                            padding: 10,
                            cornerRadius: 10,
                            titleFont: {
                                size: 12,
                                weight: 'bold'
                            },
                            bodyFont: {
                                size: 11
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                font: {
                                    size: 10
                                }
                            }
                        },
                        y: {
                            beginAtZero: false,
                            min: 60,
                            title: {
                                display: true,
                                text: '身高 (cm)',
                                font: {
                                    size: 10,
                                    weight: 'normal'
                                }
                            },
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            },
                            ticks: {
                                font: {
                                    size: 10
                                }
                            }
                        },
                        y1: {
                            beginAtZero: false,
                            min: 6,
                            position: 'right',
                            title: {
                                display: true,
                                text: '体重 (kg)',
                                font: {
                                    size: 10,
                                    weight: 'normal'
                                }
                            },
                            grid: {
                                drawOnChartArea: false,
                                color: 'rgba(0, 0, 0, 0.05)'
                            },
                            ticks: {
                                font: {
                                    size: 10
                                }
                            }
                        }
                    }
                }
            });
        });
    </script>
</body>
</html> 